<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>AD管理系统</title>
        <link rel="stylesheet" href="/static/layui/css/layui.css">
        <script src="/static/layui/layui.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </head>
<body>

<div class="layui-layout layui-layout-admin">
  <div class="layui-header layui-bg-cyan">
    <div class="layui-logo" style="color: white;font-size: 26px;font-weight: bold">AD管理系统</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="/static/images/用户.jpeg" class="layui-nav-img">{{ username }}
        </a>
        <dl class="layui-nav-child">
            <dd><button class="layui-btn" id="modify-admin-name-btn">修改用户名</button></dd>
            <dd><button class="layui-btn" id="modify-password-btn">修改密码&nbsp&nbsp&nbsp&nbsp</button></dd>
            <dd><a  href="{{ url_for("logout") }}"><i class="layui-icon layui-icon-logout"></i>退出</a></dd>
        </dl>
      </li>
{#          <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>#}
{#            <a href="javascript:;">#}
{#              <i class="layui-icon layui-icon-more-vertical"></i>#}
{#            </a>#}
{#          </li>#}
    </ul>
  </div>

  <div class="layui-side layui-bg-black ">
    <div class="layui-side-scroll layui-bg-cyan">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">
        <li class="layui-nav-item">
          <a href="/manage"><i class="layui-icon layui-icon-home"></i>首页</a>
        </li>

        <li class="layui-nav-item layui-nav-itemed">
            <dd><a class="" href="/manage_users"><i class="layui-icon layui-icon-template-1"></i>用户管理</a></dd>
        </li>

        <li class="layui-nav-item">
          <dd>
          <a class="" href="/manage_ou"><i class="layui-icon layui-icon-template-1"></i>组织管理</a></dd>
        </li>

{#        <li class="layui-nav-item">#}
{#          <dd>#}
{#          <a class="" href="/manage_group"><i class="layui-icon layui-icon-template-1"></i>用户组管理</a></dd>#}
{#        </li>#}

{#            <li class="layui-nav-item">#}
{#              <dd>#}
{#              <a class="" href="/manage_ou_1"><i class="layui-icon layui-icon-template-1"></i>组织管理11</a></dd>#}
{#            </li>#}

      </ul>
    </div>
  </div>

  <div class="layui-body" style="background: #eeeeee">
    <!-- 内容主体区域 -->
    <iframe id="iframeMain" src="/manage_server" style="width: 100%"; height="100%";></iframe>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    Author:who_am_i?
  </div>

</div>

<div id="modify-password" class="modify-password" style="display: none">
    <!-- 后续再加密码验证 -->
    <div class="layui-inline">
        <label class="layui-form-label">旧密码</label>
        <div class="layui-input-inline">
          <input type="password" id="old_password" name="old_password"  lay-verify="required" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">新密码</label>
        <div class="layui-input-inline">
          <input type="password" id="new_password" name="new_password"  lay-verify="required" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
	    <label class="layui-form-label">确认新密码</label>
	    <div class="layui-input-inline">
	        <input type="password" id="password1" lay-verify="required|confirmPass" class="layui-input">
	    </div>
    </div>

</div>

<div id="modify-admin-name" class="modify-admin-name" style="display: none">
    新用户名：<input type="text" id="username">
</div>

{% block js %} {% endblock %}
</body>

<script>
    $(document).ready(function(){
        $("dd>a").click(function (e) {
            e.preventDefault();
            $("#iframeMain").attr("src",$(this).attr("href"));
            });
        });
    if(self !== top) {
            top.location.href = window.location.href;
    }
</script>

<script>
layui.use('layer', function(){
  var layer = layui.layer;
  $('#modify-password-btn').on('click', function(){
        layer.open({
            type: 1,    // 弹出层类型
            title: '修改密码',
            area: ['400px', '253px'],
            btn: ['确定','取消'],
            shade: [0.5,'#00000'],
            shadeClose:    true,
            content: $('#modify-password'),
            btn1: function (layero,index){
                 if ($('#new_password').val() === $('#password1').val()) {
                     $.ajax({
                        url:'/modify_password',
                        type:'post',
                        data:{
                            old_password:$('#old_password').val(),
                            password:$('#new_password').val()
                        },
                        success:function (res){
                            console.log(res);
                            if(res.code === 1){alert(res.msg);
                                layer.closeAll();
                            }
                            else if(res.code === 2){alert(res.msg)}
                        },
                     })
                 }
                 else if ($('#new_password').val() != $('#password1').val()) {
                     alert('密码不一致')
                 }
            },
        });
  });
  $('#modify-admin-name-btn').on('click', function(){
        layer.open({
            type: 1,    // 弹出层类型
            title: '修改用户名',
            {#area: ['500px', '400px'],#}
            btn: ['确定','取消'],
            shade: [0.5,'#00000'],
            shadeClose: true,
            content: $('#modify-admin-name'),
            btn1: function (layero,index){
                    $.ajax({
                        url:'/modify_admin_name',
                        type:'post',
                        data:{
                            username:$('#username').val()
                        },
                        success:function (res){
                            console.log(res);
                            if(res.code === 1){alert(res.msg);
                                layer.closeAll();
                            }
                            else if(res.code === 2){alert(res.msg)}
                        },
                    })
            },
        });
  });
});
</script>

</html>
